<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        #app {
            width: 400px;
            height: 500px;
            background-color: #ccc;
            margin: 0 auto;
            overflow-y: auto;
        }

        .van-list {
            width: 100%;
            height: 100%;

        }
    </style>
</head>

<body>
    <div id="app">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="item in 10" :key="item" :title="item" />
        </van-list>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                finished: false,
                list: [],
            }
        },
        methods: {
            onLoad() {
                // setTimeout(() => {
                //     for (let i = 0; i < 10; i++) {
                //         this.list.push(this.list.length + 1);
                //     }

                //     // 加载状态结束
                //     this.loading = false;

                //     // 数据全部加载完成
                //     if (this.list.length >= 40) {
                //         this.finished = true;
                //     }
                // }, 1000);
            }
        },
    })
</script>

</html>